<template>
	<div>
		<div class="dataDiv">
			<el-form ref="myform" :model="aform" label-width="100px">
				<el-row style="padding-top:20px;">
					<el-col :span="12">
						<i class="el-icon el-icon-search"></i>
						筛选搜索
					</el-col>
					<el-col :span="12" style="text-align: right;padding-right:20px;">
						<el-button size="mini" @click="resetForm" type="reset">重置</el-button>
						<el-button size="mini" type="primary" @click="queryResult">查询结果</el-button>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="8" align="center">
						<el-form-item label="输入搜索：" prop="keyword">
							<el-input size="small" placeholder="商品名称" v-model="aform.keyword"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" align="center">
						<el-form-item label="商品货号：" prop="productSn">
							<el-input size="small" placeholder="商品货号" v-model="aform.productSn"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" align="center">
						<el-form-item label="商品分类：" prop="productCategoryId">
							<!-- <el-input size="small"  v-model="form.keyword"></el-input> -->
							<el-cascader v-model="aform.productCategoryId" :options="catList" size="small" :props="{label:'name',value:'id'}"
							 @change="handleChange"></el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="8" align="center">
						<el-form-item label="商品品牌：" prop="brandId">
							<!--  <el-input size="small"  v-model="form.keyword"></el-input> -->
							<el-select v-model="aform.brandId" placeholder="请选择" size="small">
								<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8" align="center">
						<el-form-item label="上架状态：" prop="publishStatus">
							<el-select v-model="aform.publishStatus" placeholder="请选择" size="small">
								<el-option v-for="item in publishStatus" :key="item.status" :label="item.label" :value="item.status">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8" align="center">
						<el-form-item label="审核状态：" prop="verifyStatus">
							<el-select v-model="aform.verifyStatus" placeholder="请选择" size="small">
								<el-option v-for="item in verifyStatus" :key="item.status" :label="item.label" :value="item.status">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="id" label="编号" width="80">
				</el-table-column>
				<el-table-column label="商品图片" width="110">
					<template v-slot="can">
						<img :src="can.row.pic" width="80" height="80" />
					</template>
				</el-table-column>
				<el-table-column prop="name" label="商品名称">
				</el-table-column>
				<el-table-column label="价格/货号">
					<template v-slot="data">
						<p>价格:{{data.row.price}}</p>
						<p>货号:{{data.row.productSn}}</p>
					</template>
				</el-table-column>
				<el-table-column align="center" label="标签">
					<template v-slot="data">
						<p>上架:<el-switch @change="changePublishStatus(data.row.id,data.row.publishStatus)" v-model="data.row.publishStatus"
							 :active-value="1" :inactive-value="0"></el-switch>
						</p>
						<p>新品:<el-switch v-model="data.row.newStatus" :active-value="1" :inactive-value="0"></el-switch>
						</p>
						<p>推荐:<el-switch v-model="data.row.recommandStatus" :active-value="1" :inactive-value="0"></el-switch>
						</p>
					</template>
				</el-table-column>
				<el-table-column prop="sort" align="center" width="80" label="排序">
				</el-table-column>
				<el-table-column align="center" prop="name" width="80" label="SKU库存">
					<template v-slot="data">
						<el-button type="primary" @click="showSkuDialog(data.row.id,data.row.productSn)" icon="el-icon-edit" circle></el-button>
					</template>
				</el-table-column>
				<el-table-column prop="sale" width="80" align="center" label="销量">
				</el-table-column>
				<el-table-column align="center" label="审核状态">
					<template v-slot="data">
						<p>{{data.row.verifyStatus == 0 ? "未审核" : '已审核'}}</p>
						<p>审核详情</p>
					</template>
				</el-table-column>
				<el-table-column width="200" align="center" label="操作">
					<template v-slot="data">
						<p>
							<el-button size="mini">查看</el-button>
							<el-button size="mini" @click="toEdit(data.row.id)">编辑</el-button>
						</p>
						<p>
							<el-button size="mini">日志</el-button>
							<el-button size="mini" type="danger" @click="delProduct(data.row.id)">删除</el-button>
						</p>
					</template>
				</el-table-column>
			</el-table>


			<el-row>
				<el-col :span="6">2</el-col>
				<el-col :span="18" align="right">
					<el-pagination 
					@size-change="handleSizeChange" 
					@current-change="handleCurrentChange" 
					:current-page="aform.pageNum"
					 :page-sizes="[2, 5, 10, 20]" 
					 :page-size="aform.pageSize" 
					 layout="total, sizes, prev, pager, next, jumper" 
					 :total="total">
					</el-pagination>
				</el-col>
			</el-row>
		</div>


		<!-- sku编辑框 -->
		<el-dialog title="编辑货品信息" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<el-row :gutter="20">
				<el-col :span="10" style="line-height: 28px;">商品货号： {{sn}}</el-col>
				<el-col :span="14">
					<el-input size="mini" placeholder="按sku编号搜索" v-model="kys" class="input-with-select">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</el-col>
				<el-table :data="skuDataFilter" border style="width: 100%;margin-top:20px;">
					<el-table-column prop="id" label="sku编号"></el-table-column>
					<!-- 加入属性 -->
					<template v-if="skuData.length>0">
						<template v-for="(item,index) in skuData[0].spData">
							<el-table-column :label="item.key">
								<!-- 当前行sku的值 -->
								<template v-slot="s">
									{{s.row.spData[index].value}}
								</template>
								{{skuData[index].value}}
							</el-table-column>
						</template>
					</template>

					<el-table-column label="销售价格">
						<template v-slot="data">
							<el-input v-model="data.row.price"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="商品库存">
						<template v-slot="data">
							<el-input v-model="data.row.stock"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="库存预警值">
						<template v-slot="data">
							<el-input v-model="data.row.lowStock"></el-input>
						</template>
					</el-table-column>

				</el-table>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveSku">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import axios from 'axios'
	import Cookies from 'js-cookie'
	import {
		getProductList,
		productPublishStatus,
		deleteStatus
	} from '@/api/product.js'

	import {
		getSkuListByPid,
		updateSkuList
	} from '@/api/productSku.js'

	import {
		getBrandList
	} from '@/api/productBrand.js'


	import {
		getCatList
	} from '@/api/productCat.js'
	export default {
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				kys: '',
				skuData: [],
				sn: "",
				pid: '',
				publishStatus: [{
					label: "上架",
					status: 1
				}, {
					label: "下架",
					status: 0
				}],
				verifyStatus: [{
					label: "已审核",
					status: 1
				}, {
					label: "未审核",
					status: 0
				}],
				aform: {
					brandId: '',
					keyword: '',
					pageNum: 1,
					pageSize: 5,
					productCategoryId: '', //它是一个数组
					productSn: '',
					publishStatus: '',
					verifyStatus: ''
				},
				value: [],
				catList: [],
				brandList: [],
				total:""
			}
		},
		methods: {
			delProduct(pid){
				deleteStatus({
					ids:pid,
					deleteStatus:1		//1表示删除
				}).then(resp=>{
					if(resp.code == 200){
						this.$message({
							message:"删除成功",
							type:"success"
						})
						this.queryResult();
					}
				})
			},
			handleSizeChange(val) {
				this.aform.pageSize = val;
				this.queryResult()
			},
			handleCurrentChange(val) {
				this.aform.pageNum = val;
				this.queryResult()
			},
			toEdit(pid){
				this.$router.push({
					path:"/product/add",
					query:{id:pid}
				});
			},
			// 搜索
			queryResult() {
				getProductList(this.aform)
					.then(resp => {
						this.tableData = resp.data.list;
						this.total = resp.data.total;
					})
			},
			handleChange() {},
			resetForm() {
				this.$refs['myform'].resetFields();
				/* this.aform = {brandId: '',keyword: '',pageNum: 1,pageSize: 100,productCategoryId: '', //它是一个数组
					productSn: '',publishStatus: '',verifyStatus: ''
				} */
			},
			saveSku() {
				//发送请求，保存信息,传参数(要编辑的商品id，对应的所有sku数据skuData)
				let p = JSON.parse(JSON.stringify(this.skuData));

				p.forEach(item => {
					item.spData = JSON.stringify(item.spData);
				})
				console.log(p);
				updateSkuList(this.pid, p)
					.then(resp => {
						if (resp.code == 200) {
							this.dialogVisible = false;
						}
					})
			},
			showSkuDialog(pid, sn) {
				this.dialogVisible = true;
				this.sn = sn;
				this.pid = pid;
				// 拿数据
				getSkuListByPid(pid, null)
					.then(data => {
						this.skuData = data.data;
						this.skuData.forEach(item => {
							item.spData = JSON.parse(item.spData);
						})
					})
			},
			// 关闭弹窗的回调函数
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			changePublishStatus(id, status) {
				productPublishStatus({
						ids: id,
						publishStatus: status
					})
					.then(resp => {
						if (resp.code == 200) {
							this.$message({
								message: '修改成功',
								type: 'success'
							});
						}
					})

			}
		},
		computed: {
			skuDataFilter() {
				return this.skuData.filter(item => {
					if (this.kys == "") {
						return item;
					}
					return item.id.toString().includes(this.kys);
				})
			}
		},
		mounted() {
			// 获取品牌列表
			getBrandList().then(resp => this.brandList = resp.data);

			// 获取分类列表
			getCatList().then(resp => {
				this.catList = resp.data;
			})
			
			this.queryResult()

			// getProductList(null)
			// 	.then(resp => {
			// 		this.tableData = resp.data.list;
			// 	})
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.dataDiv {
		// border:3px solid red;
		margin: 0 10px;
		padding-bottom: 100px;
		.el-form {
			border: 1px solid #ccc;
			margin: 20px 0;

			.el-icon-search {
				margin-left: 20px;
			}

			.el-form-item {
				padding: 0 30px;
			}
		}
		.el-table {}
	}
</style>
